<script setup>
import {ref} from "vue";
import {addAddressService, findAllAddressService, saveEditService, setDefaultService, deleteByIdService} from '@/js/api/address'
const dialogFormVisible = ref(false)//新建弹窗是否显示
const dialogEditVisible = ref(false)//编辑弹窗是否显示
const tableData = ref([
  {
    addressId:"",
    conName: "DUIT",//收货人姓名
    phone: "17823529788",
    address: "广东省佛山市南海区华南师范大学",
    isItDefault:0//是否是默认地址
  },
])
const address = ref({
  addressId:"",
  conName: "",
  phone: "",
  address: "",
  isItDefault:0//是否是默认地址
})

//重置address数据模型
const resetAddress = () => {
  address.value = {}
}
//新增地址保存
const addAddress = async () => {
  let result = await addAddressService(address.value)
  tableData.value = result.data.data
  dialogFormVisible.value = false;
  resetAddress()
}
//查找所有收货地址
const findAllAddress = async () => {
  let result = await findAllAddressService()
  tableData.value = result.data.data
}
//弹出编辑窗口
const toEdit = (row) => {
  dialogEditVisible.value = true
  address.value = row
}
//编辑保存
const saveEdit = async () => {
  dialogEditVisible.value = false
  let result = await saveEditService(address.value)
  tableData.value = result.data.data
  resetAddress()
}
//设为默认
const addressDefault = async (row) => {
  let result = await setDefaultService(row.addressId)
  tableData.value = result.data.data
}
//删除收货地址
const deleteById = async (row) => {
  let result = await deleteByIdService(row.addressId)
  tableData.value = result.data.data
}

findAllAddress()

//以下代码用来解决按F12 页面大小变化时报错的问题
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}


</script>

<template>
  <div class="filter-container">
    <el-button type="primary" class="butT" @click="dialogFormVisible = true">新建</el-button>
  </div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="conName" label="收货人姓名" width="180">
    </el-table-column>
    <el-table-column prop="phone" label="手机号" width="180" />
    <el-table-column prop="address" label="地址" width="360" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="toEdit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
        <el-button type="primary" @click="addressDefault(scope.row)" v-if="!scope.row.itDefault">设为默认</el-button>
        <span v-else class="showDefault">默认地址</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增标签弹层 -->
  <el-dialog v-model="dialogFormVisible" title="新增收货地址" @close="resetAddress">
    <el-descriptions column=1>
      <el-descriptions-item label="收货人姓名">
        <el-input v-model="address.conName"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-input v-model="address.phone"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="收货人地址">
        <el-input v-model="address.address"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <el-button type="primary" @click="addAddress">保存</el-button>
        <el-button type="danger" @click="dialogFormVisible=false;resetAddress">取消</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <!-- 编辑标签弹层 -->
  <el-dialog v-model="dialogEditVisible" title="编辑收货地址" @close="resetAddress">
    <el-descriptions column=1>
      <el-descriptions-item label="收货人姓名">
        <el-input v-model="address.conName"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <el-input v-model="address.phone"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="收货人地址">
        <el-input v-model="address.address"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <el-button type="primary" @click="saveEdit">保存</el-button>
        <el-button type="danger" @click="dialogEditVisible=false;resetAddress">取消</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style scoped>
.filter-container{
  padding:10px 0 15px 0;
}
.showDefault{
  border: 1px solid red;
  border-radius: 3px;
  background-color: red;
  color:white;
  font-size: 12px;
  font-weight: bold;
  margin-left: 20px;
}
</style>